import { devNull } from "os"
import {FC,useRef,useEffect,createRef,forwardRef} from "react"
// 函数组件时不能直接用Ref来引用的 

// forwardRef(函数组件) 可以用于传递Ref，也可以让子组件暴露方法给父组件（相当于子传父）

// ts类型 forwordRef<ref类型，props类型>
type h = HTMLInputElement | null
type p = {
    age:number
}

// 步骤二：
// 创建一个组件，并且使用forwordreff包裹起来
const Child = forwardRef<h,p>((props,ref) => {
    console.log('child组件的',props);
    
    return(
        <fieldset>
            <legend>child组件</legend>
            {/* 步骤四，接受到父组件转递的ref- */}
            <h1 ref={ref}>一个子组件</h1>
        </fieldset>
    )
})

const Forword:FC<any> = () => {
    let ipt = useRef<HTMLInputElement>(null)
    // 步骤一：
    // 要传递的ref
    let c = useRef<h>(null)
    useEffect(()=>{
        console.log(ipt);
        console.log(c.current!.style.color = 'deepskyblue');
        
    })
    return(
        <fieldset>
            <legend>forword</legend>
            <input type="text" ref={ipt}/>
            {/* 步骤三：展示组件，并且打上ref */}
            <Child ref={c} age={30}/>
        </fieldset> 
    )
}
export default Forword